<script setup lang="ts">
import { onMounted, ref } from "vue";
import { Api } from "../../assets/api/api";
import { useRouter } from "vue-router";
import { showToast } from "vant";

// 电话号码
const phoneNumber = ref("");
//验证码
const captcha = ref("");
//控制验证码点击时间间隔
const flag = ref(true);
const time = ref(60);

//vue3自带方法
const router = useRouter();

//获取验证码
const getCode = async () => {
  let timer: any = null;
  // 手机号检测
  let num_getcode =
    /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/;
  // 检测手机号码是否填写正确
  if (flag.value) {
    flag.value = false;
    if (num_getcode.test(phoneNumber.value)) {
      timer = setInterval(() => {
        time.value--;
        if (time.value == 0) {
          window.clearInterval(timer);
          timer = null;
          flag.value = true;
          time.value = 60;
        }
      }, 1000);
      await Api.requesRegisterGetCode(phoneNumber.value);
    } else {
      showToast("请检查手机号码");
      flag.value = true;
    }
  } else {
    showToast("请等候");
  }
};
//注册
const getregister = async () => {
  let numGetcode =
    /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/;
  let { data } = await Api.RegisterVerificationCode(
    phoneNumber.value,
    captcha.value
  );
  //判断是否有数据
  if (JSON.parse(localStorage.getItem("user_information") as any)) {
    // 检测账号是否已有
    for (
      let i = 0;
      i < JSON.parse(localStorage.getItem("user_information") as any).length;
      i++
    ) {
      if (
        JSON.parse(localStorage.getItem("user_information") as any)[i]
          .account == phoneNumber.value
      ) {
        showToast("账号已存在");
      } else {
        //手机或验证码为空
        if (!numGetcode.test(phoneNumber.value) || captcha.value.trim() == "") {
          showToast("请检查手机/验证码");
        }
        // 验证码错误
        else if (!data) {
          showToast("验证码错误");
        }
        // 正确，跳转到密码设置页面
        else if (numGetcode.test(phoneNumber.value) && data) {
          router.push({
            name: "setpass",
            query: { captcha: phoneNumber.value },
          });
        }
      }
    }
  } else {
    if (!numGetcode.test(phoneNumber.value) || captcha.value.trim() == "") {
      showToast("请检查手机/验证码");
    }
    // 验证码错误
    else if (!data) {
      showToast("验证码错误");
    }
    // 正确，跳转到密码设置页面
    else if (numGetcode.test(phoneNumber.value) && data) {
      router.push({
        name: "setpass",
        query: { captcha: phoneNumber.value },
      });
    }
  }
};
</script>

<template>
  <div class="register_view">
    <nav>
      <div class="app" @click="router.go(-1)"></div>
      <h1>注册书城账号</h1>
      <div class="sourch"></div>
    </nav>
    <div class="input_box">
      <input type="text" placeholder="输入手机号" v-model="phoneNumber" />
      <!-- 验证码 -->
      <p>
        <input type="text" placeholder="输入验证码" v-model="captcha" />
        <button :class="{ con: time != 60 }" @click="getCode">
          {{ time == 60 ? "获取验证码" : time + "S" }}
        </button>
      </p>
    </div>
    <div class="btn">
      <button @click="getregister">注册</button>
    </div>
    <div class="information">
      <p>客服 400-628-9988</p>
      <p>极速版 | <span>触屏版</span> | 客户端</p>
      <p>© 2023 天浪小说</p>
      <!-- <p>京ICP备 11009265号-5</p> -->
    </div>
    <div class="repair"></div>
  </div>
</template>

<style lang="scss" scoped>
.register_view {
  min-height: 100vmax;
  background-color: #fff;
}
nav {
  display: flex;
  justify-content: space-between;
  background-color: #f7f7f7;
  border-bottom: 1px solid #cbcbcb;
  .app {
    width: 17px;
    height: 17px;
    background: url("/public/img/home/left.png") no-repeat 12px 0px;
    background-size: 8px 13px;
    margin-top: 13px;
    padding-left: 11px;
    padding-right: 44px;
  }
  h1 {
    font-size: 17px;
    color: #333333;
    padding-top: 12px;
    padding-bottom: 10px;
    font-weight: normal;
  }
  .sourch {
    display: flex;
    width: 60px;
    padding-right: 12px;
    justify-content: flex-end;
    align-items: center;
    p {
      font-size: 12px;
      color: #999999;
    }
    .img {
      width: 16px;
      height: 16px;
      background: url(https://img.xmkanshu.com/operateimg/img/img/18697/18697.png)
        no-repeat center center;
      background-size: cover;
    }
  }
}
.input_box {
  padding-top: 18px;
  background-color: #fff;
  padding-left: 10px;
  &.con {
    padding-bottom: 18px;
  }
  input {
    width: 89.3%;
    height: 36px;
    outline: none;
    margin-bottom: 18px;
    padding-left: 18px;
    color: #757575;
    border: 1px solid #999999;
    font-size: 15px;
  }
  p {
    input {
      width: 54.7%;
      margin-right: 8px;
    }
    button {
      width: 118px;
      height: 36px;
      border: 1px solid #f54b41;
      font-size: 12px;
      color: #f54b41;
      background-color: #fff;
      &.con {
        background-color: #b5b5b5;
        border-color: #b5b5b5;
        color: #fff;
      }
    }
    .img_text {
      position: relative;
      top: 10px;
    }
  }
  .look_input {
    width: 89.3%;
    height: 36px;
    padding-left: 18px;
    color: #757575;
    border: 1px solid #999999;
    display: flex;
    align-items: center;
    input {
      border: none;
      width: 90%;
      margin: 0;
      padding: 0;
    }
    img {
      width: 25px;
      height: 15px;
    }
  }
}
.btn {
  padding: 0 10px;
  padding-bottom: 150px;
  button {
    width: 100%;
    color: #fff;
    font-size: 15px;
    background-color: #f54b41;
    height: 36px;
    border: none;
  }
}
.information {
  background-color: #fbfbfb;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 11px;
  p {
    font-size: 13px;
    color: #999999;
    margin-bottom: 14px;
    &:nth-of-type(1) {
      color: #c1c1c1;
    }
    span {
      font-size: 14px;
      color: #000;
    }
  }
}
</style>